*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "helvetica";
}

a{
    text-decoration: none;
}

#verde{
    color: green;
} /*SPAN COM ESSA CLASSE VÃO SER VERDES*/

.logo{
    position: absolute;
    top: 0;
    right: 0;
}

#verde:hover{
    color: #16cd40; /* preto → verde */
    transition: .5s;
    text-shadow: 0 0 10px #1a9c3886,
    0 0 20px #1a9c3886;
    cursor: default;
}

#verde::before{
    content: "";
    position: absolute;
    top: -50;
    left: -50;
    width: 0;
    height: 5%;
    background-color: #2ecc7000;
    transition: 2s;
    z-index: -1;
}

#verde:hover:before{
    width: 17%;
    opacity: 0;
    cursor: auto;
}

.botao-retorno{
    position: absolute; /* Fixa o botão na tela */
    top: 20px; /* Distância do fundo da tela */
    left: 20px; /* Distância da direita da tela */
    color: #1a9c38; /* white → verde */
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    background-color: #FFFFFF00;
    font-size: 30px;
    
    :hover{
        transform: scale(1.1);
        transition:.2s;
        border-color: #1a9c38;
        color: #2ecc71;
        box-shadow: #043d06;
    }

}

.quemsomos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.quemsomos h2{
    padding-bottom: 20px;
}

.apresenta{
    padding: 40px 5%;
}

.oferecemos{
    padding: 40px 5%;
}

.oferecemos h1{
    font-size: 40px;
    text-align: center;
}

.oferecemos h2{
    font-size: 20px;
    text-align: justify;
}

.oferecemos h2{
    padding-bottom: 20px;
}

.oferecemos img:hover{
    box-shadow: 0 0 2px #16cd40,
    0 0 5px #16cd40, 
    0 0 10px #16cd40,
    0 0 20px #16cd40,
    0 0 25px #16cd40,
    0 0 30px #16cd40;
}
.foto{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 2%;
}

.compromisso{
    text-align: justify;
}

.apresenta img{
    width: 80%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    transition: .6s;
    border-radius: 10px;
}

.apresenta img:hover{
    box-shadow: 0 0 2px #16cd40,
    0 0 5px #16cd40,
    0 0 10px #16cd40,
    0 0 20px #16cd40,
    0 0 25px #16cd40,
    0 0 35px #16cd40;
}

.oferecemos img{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    transition: .6s;
    border-radius: 10px;
}

.apresenta{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.oferecemos{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.compromisso{
    padding: 50px 5%;
}

.compromisso h1{
    text-align: center;
    font-size: 40px;
}

.oferecemos h2{
    text-align: justify;
    font-size: 20px;
}
main {
    display: flex;
    flex-direction: column;
    padding: 20px;
    padding-top: 80px; 
}

.apresenta{
    text-align: center;
}
.apresenta h1{
    font-size: 50px;
}

footer {
    padding: 60px 4%;
    box-shadow: 0 0 40px 10px #1a9c381d;
    max-height: 100%;
}
.carao {
    color: #1a9c38;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
}
.social{
    color: #1a9c38;
    padding: 10px;
    font-size: 20px;

    :hover{
        color: #2ecc71;
        transform: scale(1.1);
        transition: .3s;
    }
}

@media screen and (max-width:1020px){
    body{
        font-size: 10px;
    }
}

@media (prefers-color-scheme: dark){
    body{

        background-color: #000;
    }
    .apresenta{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
}
   .oferecemos h1{
    font-size: 40px;
    text-align: center;
    color: #ffffff;

}
    .oferecemos h2{
        color: #fff;

    }
.compromisso{
    text-align: justify;
    color: #fff;
}


}